<template>
  <div class='container' >
    <el-form :model="addForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm">
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="addForm.title"></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleBody"  class="articleBody">
        <quill-editor :options="editorOption" v-model="addForm.articleBody" @blur="$refs.ruleFormRef.validate(rules.articleBody)"></quill-editor>
      </el-form-item>
      <el-form-item label="视频链接" prop="videoURL">
        <el-input v-model="addForm.videoURL" placeholder="请输入视频链接"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { validateURL } from '../../utils/validate.js'
export default {
  name: 'AddArticle',
  components: {

  },
  props: {
    addForm: {
      type: Object,
      required: true
    }

  },
  data () {
    var videoMessage = (rule, value, callback) => {
      if (value === '') {
        callback()
      } else {
        if (!validateURL(value)) {
          callback(new Error('请正确的视频地址'))
        } else {
          callback()
        }
      }
    }
    return {

      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }],
        videoURL: [{ validator: videoMessage, trigger: 'blur' }]
      },
      // editorOption: { // 定义富文本编辑器显示
      //   modules: {
      //     toolbar: [
      //       ['bold', 'italic', 'underline', 'strike'], // 加粗、倾斜、下划线、删除线

      //       [{ header: 1 }, { header: 2 }], // 标题一、标题二
      //       [{ list: 'ordered' }, { list: 'bullet' }], // 列表

      //       [{ color: [] }, { background: [] }], // 字体颜色、背景颜色
      //       ['link', 'image', 'video'] // 链接、图片、视频
      //     ]
      //   },
      //   placeholder: '文章内容'

      // }
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            // [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            // [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: [] }], // 字体种类
            // [{ align: [] }], // 对齐方式
            // ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入内容及工作量'
      }

    }
  },
  mounted () {

  },
  created () {

  },
  methods: {
    validateForm () {
      let flag = null
      this.$refs.ruleFormRef.validate(valid => {
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    }

  }
}
</script>

<style lang="less" scoped>
   .container {
     /deep/ .el-form {
       .el-form-item {
         max-width: 700px;
         margin-top: 10px;
          .quill-editor {
            .ql-container {
              height: 135px;
            }
          }
       }
      //  .articleBody {
      //    height: 130px;
      //  }

     }
   }
</style>
